<template>
    <div id="zxTianqi">
        <div class="heightChart">
            <div class="title">天气预报</div>
            <div class="navboxes">
				未确认
            </div>
        </div>
    </div>
</template>

<script>
    import {getWeather} from "../../../network/home";
    export default {
        name: "zxTianqi",
        data() {
            return {
                year:'',
                img_src:'',
                list: [],
                list2:[],
                timer: null,
            }
        },
        mounted() {
            this.getWeather()
            this.timer = setInterval(() => {
                this.getWeather();
            }, 3600000);

        },
        beforeDestroy() {
            if (this.timer) { //如果定时器还在运行 或者直接关闭，不用判断
                clearInterval(this.timer); //关闭
                console.log('左上关闭')
            }
        },
        methods: {
            getWeather() {
                var that = this
                getWeather().then(res => {
                    var date = new Date();
                    that.year = date.getFullYear();
                    if (res.code == '200') {
                        // console.log(res.data.data.now.city)
                        // console.log(res.data.data.now.detail)
                        this.list = res.data.data.now.city
                        this.list2 = res.data.data.now.detail

                        var imgs = this.list2.weather_code
                        if (imgs.indexOf("转") >= 0) {
                            imgs = imgs.split("转")[0];
                        }
                        that.img_src = '../../../assets/img/worktake/' + imgs + ".png"
                        that.img_src = require('../../../assets/img/worktake/' + imgs + '.png')
                        // console.log(that.img_src)
                    }
                });
            }
        }
    }
</script>

<style scoped>
    .heightChart {
        width: 610px;
        height: 220px;
        background: url("../../../assets/img/worktake/top.png");
        background-size: 610px 220px;
        position: relative;
    }

    .title {
        position: absolute;
        width: 100%;
        left: 0;
        right: 0;
        top: -5%;
        text-align: center;
        font-size: 22px;
        color: #3399FF;
    }
    .navboxes{
        font-size: 20px;
        color: #03F5FF;
        padding: 25px 20px 20px 50px;
    }
    
</style>
